<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
	<title>阿玛尼护肤造型</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH}content/scripts/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH}content/css/ratchet.min.css?v=1.7">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH}content/css/storefront.css">
	<script src="${ROOT_PATH}content/scripts/jquery-1.10.1.min.js"></script>
	<script src="${ROOT_PATH}content/scripts/juery.hammer.js"></script>
	<script src="${ROOT_PATH}content/scripts/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<section>
		<div class="container-fluid" style="color: white;">
			<div class="row" style="position: relative;">
				<img alt="..." src="${pro.mainimageurl}" class="img-responsive">
				<div style="position: absolute;bottom: 0px;width: 95.2%;">
					<div class="row" style="background: rgba(24,24,24,0.5);">
						<div class="col-xs-12" style="padding:5px 0 5px 30px;font-size: 18px;">${pro.name}</div>
					</div>
					<div class="row" style="background: rgba(24,24,24,0.5);">
						<div class="col-xs-12" style="padding-left: 30px;line-height: 20px;">
							<span style="color: #B89D62;font-size: 28px;">&yen;${pro.price}</span>
							<span style="text-decoration: line-through;margin-left: 10px;font-size: 18px;">&yen;${pro.originalcost}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="row" style="margin-top: 20px;color: #B89D62;">
				<div class="col-xs-12">套餐介绍</div>
			</div>
			<div class="row" style="margin-top: 20px;">
				<div class="col-xs-12">
					<p style="color: white;font-size: 16px;text-indent:2em;">${pro.content}</p>
				</div>
			</div>
			<div class="row" style="margin-top: 20px;color: #B89D62;">
				<div class="col-xs-12">包含项目</div>
			</div>
			<div class="row" style="margin-top: 10px;">
				<div class="col-xs-12">
					<c:forEach var="p_item" items="${itemSet}">
						<a href="${ROOT_PATH}Storefront/detail/${p_item.type}/${p_item.productid}">
							<div class="row" style="margin: 10px -10px 5px -10px;background-color: #303030;padding: 10px 0;">
								<div class="col-xs-3" style="padding-right: 0px;padding-left: 5px;">
									<img alt="..." src="${p_item.mainimageurl}" class="img-circle" style="width:75%;height: 50px;">
								</div>
								<div class="col-xs-5" style="padding: 0px 5px;">
									<div style="position: absolute;top: 5px;color: white;white-space: nowrap;text-overflow:ellipsis;overflow: hidden;width: 100%;" class="font-over">${p_item.name}
									<div style="padding: 5px 0;color: gray;">&yen;${p_item.price}</div></div>
								</div>
								<div class="col-xs-2" style="padding-right: 0px;line-height: 50px;color: gray;">X${p_item.count}</div>
								<div class="col-xs-2 text-right">
									<img alt="..." src="${ROOT_PATH}content/images/p1_ckqb.png" style="width: 70%;padding:  15px 0;" class="img-responsive">
								</div>
							</div>
						</a>
					</c:forEach>
				</div>
			</div>
			<div class="col-xs-12 text-center" style="padding: 10px 0;margin-top: 20px;">
				<button class="btn btn-outlined">立即预约</button>
				<form id="doForm" name="doForm" action="${ROOT_PATH}Orders/Step2" method="post">
					<input type="hidden" id="xcoordinate" name="xcoordinate" />
					<input type="hidden" id="ycoordinate" name="ycoordinate" />
					<input type="hidden" id="ordersFactProject" name="ordersFactProject" value="006"/>
					<input type="hidden" id="projectno" name="projectno" value="${pro.id}"/>
					<input type="hidden" id="projectname" name="projectname" value="${pro.name}"/>
					<input type="hidden" id="cardid" name="cardid" value="${pro.card_id}"/>
					<input type="hidden" id="price" name="price" value="${pro.price}"/>
					<input type="hidden" id="sourceType" name="sourceType" value="Storefront" />
				</form>
			</div>
		</div>
	</section>
	<script type="text/javascript">
		$(window).load(function(){
			var showPosition= function (position){
		        $("#xcoordinate").val(position.coords.longitude);
		        $("#ycoordinate").val(position.coords.latitude);
		    };
			navigator.geolocation.getCurrentPosition(showPosition);
		});
		$(function(){
			$("button").click(function(){
				$("#doForm").submit();
			});
		});
	</script>
</body>
</html>